<template>
  <div class="app-container">
    <el-form ref="form" :model="form" inline :rules="rules" >
      <el-form-item label="编号" prop="number">
        <el-input v-model="form.numberNum" disabled style="width: 280px;" />
      </el-form-item>
      <el-form-item label="是否为经理级别" prop="isManage" >
        <el-select v-model="form.isManage" :disabled="isdisabled" placeholder="请选择">
          <el-option
            v-for="item in optionList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!--              <el-input  v-model="form.numberNum" disabled style="width: 280px;"/>-->
      </el-form-item>
      <el-form-item label="姓名" prop="nickName">
        <el-input v-model="form.nickName" :disabled="isdisabled" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" :disabled="isdisabled" placeholder="请选择性别">
          <el-option
            v-for="dict in dict.type.sys_user_sex"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--            <el-form-item label="别名" prop="otherName">-->
      <!--              <el-input v-model="form.otherName" :disabled='isdisabled' placeholder="请输入别名" />-->
      <!--            </el-form-item>-->
      <el-form-item label="账号" prop="userName">
        <el-input v-model="form.userName" :disabled="isdisabled" placeholder="(如zhangsan)" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" :disabled="isdisabled" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="form.email" :disabled="isdisabled" placeholder="请输入用户邮箱" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input
          v-model="form.phonenumber"
          @input="form.phonenumber=form.phonenumber.replace(/^\D*([0-9]\d*)?.*$/,'$1')"
          :disabled="isdisabled"
          placeholder="请输入手机号码"
          maxlength="11"
        />
      </el-form-item>
      <el-form-item label="部门" prop="departId">
        <el-select
          v-model="form.departId"
          style="width: 3.55rem"
          :disabled="isdisabled"
          @change="deptChange"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in deptList"
            :key="item.deptName"
            :label="item.deptName"
            :value="item.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
        <el-select v-model="form.roleIds" :disabled="isdisabled" multiple placeholder="请选择角色">
          <el-option
            v-for="item in roleOptions"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
            :disabled="item.status == 1"
          ></el-option>
        </el-select>
        <!--              <el-input v-model="form.roleId" :disabled='isdisabled' placeholder="请输入角色" />-->
      </el-form-item>
      <!--            <el-form-item label="绑定员工信息" prop="oaEmployeeName" >-->
      <!--              <el-input v-model="form.oaEmployeeName" readonly :disabled='isdisabled' placeholder="请输入" >-->
      <!--                <el-button type="primary" slot="append" @click="openUserSelect" v-text="btnText"></el-button>-->
      <!--                <el-button type="success" slot="append" @click="clearSelect">清空</el-button>-->
      <!--              </el-input>-->
      <!--&lt;!&ndash;              <el-input v-model="form.oaEmployeeId" :disabled='isdisabled' placeholder="请输入花名册id" />&ndash;&gt;-->
      <!--            </el-form-item>-->
      <div>
        <el-form-item label="合同附件" v-if="!(isdisabled&&!form.attachment)">
          <file-upload v-model="form.attachment" :isDisabled="isdisabled" :limit="5" />
        </el-form-item>
      </div>
    </el-form>
    <div v-show="parentTaskId==null" class="dialog-footer" style="text-align:center">
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button
        :loading="buttonLoading"
        size="small"
        type="primary"
        @click="submitForm"
        v-if="confirmVisible"
      >提交</el-button>
    </div>
    <!-- 工作流开始 -->
    <verify
      ref="verifyRef"
      :taskId="taskId"
      @submitCallback="submitCallback"
      :componentName="componentName"
      :taskVariables="taskVariables"
      :sendMessage="sendMessage"
    ></verify>
  </div>
</template>

<script>
import { getHumanEntry } from "@/api/oa/humanEntry";
import verify from "@/components/Process/Verify";
import { parseTime } from "@/utils/ruoyi";
import { getUser } from "@/api/system/user";
import { listAll } from "@/api/system/dept";
export default {
  name: "HumanEntryForm",
  components: {
    verify
  },
  dicts: ["act_status", "sys_user_sex"],
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String, // 任务id
    confirmVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      componentName: "录用申请",
      isdisabled: true,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      projectNameList: [],
      optionList: [
        {
          label: "是",
          value: "1"
        },
        {
          label: "否",
          value: "0"
        }
      ],
      roleOptions: [],
      deptList: [],
      btnText: "选择",
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        nickName: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "用户邮箱不能为空", trigger: "blur" }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" }
        ],
        depId: [{ required: true, message: "部门不能为空", trigger: "blur" }],
        roleId: [{ required: true, message: "角色不能为空", trigger: "blur" }],
        oaEmployeeId: [
          { required: true, message: "花名册id不能为空", trigger: "blur" }
        ]
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {},
      processKey: "oa_human_entry"
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler(newVal) {
        if (newVal) {
          this.getById();
          this.getUser();
          this.listAll();
        }
      }
    }
  },
  methods: {
    submitCallback() {
      this.$emit("closeForm");
    },
    clearSelect() {
      this.form.oaEmployeeName = "";
      this.form.oaEmployeeId = "";
      // this.form.department="";
    },
    deptChange(val) {
      let depart = this.deptList.filter(item => item.deptId == val);
      if (depart.length > 0) {
        this.form.departName = depart[0].deptName;
      } else {
        this.form.departName = "";
      }
    },
    openUserSelect() {
      this.propUser = "";
      if (this.form.oaEmployeeId) {
        let userIds = this.form.oaEmployeeId;
        if (userIds.length > 0) {
          this.propUser = userIds;
        }
      }
      this.$refs.employee.visible = true;
    },
    clickUser(userList) {
      let arrAssignee = userList.map(item => {
        return item.name;
      });
      let arrAssigneeId = userList.map(item => {
        return item.id;
      });
      let resultAssignee = arrAssignee.join(",");
      let resultAssigneeId = arrAssigneeId.join(",");
      this.$set(this.form, "oaEmployeeName", resultAssignee);
      this.$set(this.form, "oaEmployeeId", resultAssigneeId);
      this.$refs.employee.visible = false;
      this.$forceUpdate();
    },
    getUser() {
      getUser().then(response => {
        this.roleOptions = response.data.roles;
      });
    },
    async getById() {
      const { data } = await getHumanEntry(this.businessKey);
      this.form = data;
      this.form.roleIds = this.form.roleId.split(",").map(item => Number(item));
      this.form.departId = Number(this.form.departId);
      if (data.actBusinessStatus.createTime) {
        this.form.numberNum =
          this.processKey +
          "@" +
          parseTime(data.actBusinessStatus.createTime, "{y}{m}{d}{h}{i}{s}");
      }
    },
    /** 提交按钮 */
    submitForm() {
      getHumanEntry(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data
        };
        this.sendMessage = {
          title: "入职申请审批提醒",
          messageContent: this.$store.state.user.nickName + "审批通过了入职申请"
        };
      });
      this.$refs.verifyRef.visible = true;
      this.$refs.verifyRef.reset();
    },
    listAll() {
      listAll().then(res => {
        console.log(res.data);
        this.deptList = res.data;
      });
    }
  }
};
</script>
<style scoped>
/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 横向滚动条 */
  height: 8px; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dde;
  border-radius: 3px;
}
#selectForm >>> .el-form-item__label {
  font-size: 12px;
}
::v-deep .bjsm .el-form-item__content {
  width: calc(100% - 130px) !important;
}
</style>
